<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar title="商品列表" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />

    <van-tabs v-model:active="active" @click-tab="onClickTab(active)">
      <van-tab title="默认">
        <div class="cell" v-for="(item, index) in getgoodslist" @click="details(item.id, index)">
          <div class="img">
            <img :src="item.img" alt="">
          </div>
          <div class="cellitem">
            <van-tag type="danger" v-if="item.isDirect">自营</van-tag>
            <van-tag color="#ccc" v-if="!item.isHave">缺货</van-tag>
            <p>{{ item.name }}</p>
            <div class="bottom">
              <p>￥ {{ item.price }}</p>
              <span>销量: {{ item.volume }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="有货优先">
        <div class="cell" v-for="(item, index) in huowu" @click="details(item.id, index)">
          <div class="img">
            <img :src="item.img" alt="">
          </div>
          <div class="cellitem">
            <van-tag type="danger" v-if="item.isDirect">自营</van-tag>
            <van-tag color="#ccc" v-if="!item.isHave">缺货</van-tag>
            <p>{{ item.name }}</p>
            <div class="bottom">
              <p>￥ {{ item.price }}</p>
              <span>销量: {{ item.volume }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="直营优先">
        <div class="cell" v-for="(item, index) in zong" @click="details(item.id, index)">
          <div class="img">
            <img :src="item.img" alt="">
          </div>
          <div class="cellitem">
            <van-tag type="danger" v-if="item.isDirect">自营</van-tag>
            <van-tag color="#ccc" v-if="!item.isHave">缺货</van-tag>
            <p>{{ item.name }}</p>
            <div class="bottom">
              <p>￥ {{ item.price }}</p>
              <span>销量: {{ item.volume }}</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 商品信息 -->
    <!-- <div class="cell" v-for="(item, index) in getgoodslist" @click="details(item.id, index)">
      <div class="img">
        <img :src="item.img" alt="">
      </div>
      <div class="cellitem">
        <van-tag type="danger" v-if="item.isDirect">自营</van-tag>
        <van-tag color="#ccc" v-if="!item.isHave">缺货</van-tag>
        <p>{{ item.name }}</p>
        <div class="bottom">
          <p>￥ {{ item.price }}</p>
          <span>销量: {{ item.volume }}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getgoods } from "../api/index.js";
import { useRouter } from 'vue-router'
import { showToast } from 'vant';
const onClickLeft = () => history.back();
const onClickRight = () => showToast('按钮');

//商品列表
const getgoodslist = ref([])
const getgood = async () => {
  let res = await getgoods()
  console.log(res);
  getgoodslist.value = res.data.data.list
}
getgood()

//商品详情
const router = useRouter()
const details = (id, i) => {
  if (getgoodslist.value[i].isHave) {
    router.push({
      path: '/goodsDetails',
      query: {
        goodsId: id
      }
    }
    )
  } else {
    showToast('该商品无货');
  }
}
const active = ref(0)
//开始做分类
// 1.有货
const huo = ref(null)
const wu = ref(null)
const huowu = ref(null)
//2
const zhiying = ref(null)
const geren = ref(null)
const zong = ref(null)
const onClickTab = (i) => {
  if (i == 1 && huowu.value == null) {
    huo.value = []
    wu.value = []
    huowu.value = []
    getgoodslist.value.forEach(item => {
      if (item.isHave || huo.value == null) {
        console.log(1);
        huo.value.push(item)

      } else if (!item.isHave || wu.value == null) {
        console.log(2);
        wu.value.push(item)
      }
    });
    huowu.value = [...huo.value, ...wu.value]
  }

  // 2.直营
  if (i == 2 && zong.value == null) {
    zhiying.value = []
    geren.value = []
    zong.value = []
    getgoodslist.value.forEach(item => {
      if (item.isDirect || zhiying.value == null) {
        zhiying.value.push(item)
      } else if (!item.isDirect || geren.value == null) {
        geren.value.push(item)
      }
    });
    zong.value = [...zhiying.value, ...geren.value]
  }

  if (i == 0) {
    huowu.value = []
    zong.value = []
  }
}

</script>

<style lang="scss" scoped>
.cell {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgb(243, 241, 241);

  .img {
    width: 120px;
    height: 120px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .cellitem {
    p {
      width: 240px;
      margin: 15px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      height: 43px;
    }

    .bottom {
      display: flex;
      padding-top: 30px;
      padding-left: 20px;

      p {
        margin: 0;
        color: red;
        width: 50%;
      }

      span {
        width: 50%;
        color: #ccc;
      }
    }
  }
}
</style>